<template>
    <view class="box">
        <view class="main">
            <view class="user">
                <view class="bg">
                    <image class="bg-img" src="/static/image/bg.png" />
                    <view class="user-info">
                        <view class="avatar">
                            <image mode="aspectFill" :src="userDetail?.avatar" />
                        </view>
                        <view class="name-box dispaly-center">
                            <view class="name">{{ userDetail?.nickname }}</view>
                            <view class="gz dispaly-align-center" @click="cancenCare(userId as number, 0)"
                                v-if="is_care == 1">已关注</view>
                            <view class="gw dispaly-align-center" @click="care(userId as number, 0)" v-else>关注</view>
                        </view>
                        <view class="tip dispaly-center">
                            <view class="tip-item dispaly-align-center" v-for="item in userDetail.teacher.good_at"
                                :key="item" v-if="userDetail?.teacher">{{ item }}</view>
                            <view class="dispaly-center" v-else>
                                <view class="tip-item dispaly-align-center">{{ userDetail?.$notes.edu }}</view>
                                <view class="tip-item dispaly-align-center">{{ userDetail?.$notes.edu_nature }}</view>
                                <view class="tip-item dispaly-align-center">{{ userDetail?.$notes.policy_out }}</view>
                            </view>
                        </view>
                        <view class="info one dispaly-center">
                            <view class="icon">
                                <image src="/static/icon/user.png" />
                            </view>
                            <view class="info-text" v-if="userDetail?.teacher">基本信息:{{ userDetail.teacher.unit_name
                                }}·{{
                                    userDetail.teacher.direction_name }}</view>
                            <view class="info-text" v-else>基本信息:{{ userDetail?.$notes.graduate_school }}·{{
                                userDetail?.$notes.special }}</view>
                        </view>
                        <view class="info dispaly-center">
                            <view class="icon">
                                <image src="/static/icon/jl.png" />
                            </view>
                            <view class="info-text" v-if="userDetail?.teacher">过往经历:{{
                                userDetail.teacher.person_level_name }}</view>
                            <view class="info-text" v-else>过往经历:{{ userDetail?.$notes.batch }}·{{ userDetail?.$notes.edu
                                }}·{{ userDetail?.$notes.graduate_school }}</view>
                        </view>
                    </view>

                </view>
            </view>
            <view class="more common" v-if="userDetail?.teacher">{{ userDetail.teacher.direction }}</view>
            <view class="state common">
                <view class="title">他的动态</view>
                <Empty v-if="!userDetail?.active" text="暂无动态" />
                <view class="container dispaly-just-between" v-else
                    @click.stop="navTo(`/subPackage/community/communityDetail?id=${userDetail?.active.id}`)">
                    <view class="left">
                        <view class="d-title">
                            {{ userDetail?.active.title }}
                        </view>
                        <view class="more-data dispaly-center">
                            <view class="time">{{ userDetail?.active.time }}</view>
                            <view class="icon-box ones dispaly-center">
                                <view class="icon">
                                    <image src="/static/icon/comn.png" />
                                </view>
                                <view class="num">{{ userDetail?.active.praise }}</view>
                            </view>
                            <view class="icon-box dispaly-center">
                                <view class="icon">
                                    <image src="/static/icon/good.png" />
                                </view>
                                <view class="num">{{ userDetail?.active.com_num }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="right">
                        <image mode="aspectFill" :src="userDetail?.active.image[0]" />
                    </view>
                </view>
            </view>
            <view class="jl common">
                <view class="title">工作经历</view>
                <view v-if="userDetail?.teacher">
                    <Empty v-if="!userDetail.teacher.work_record" text="暂无经历" />
                    <view v-else>
                        <view class="jl-item dispaly" v-for="item in userDetail.teacher.work_record.split(',')"
                            :key="item" v-if="userDetail.teacher.work_record">
                            <view class="icon">
                                <image src="/static/icon/gs.png" />
                            </view>
                            <view class="jl-desc">
                                <view class="jl-title">{{ item }}</view>
                                <!-- <view class="block-item">杭州尚题企业管理咨询有限公司</view>
                            <view class="block-item">2021.9-至今(2年9个月)</view>
                            <view class="block-tip">数据指标体系建设:日常数据监控:异常分</view> -->
                            </view>
                        </view>
                    </view>
                </view>
                <view v-else>
                    <Empty v-if="!userDetail?.$notes.service_item" text="暂无经历" />
                    <view class="jl-item dispaly" v-else>
                        <view class="icon">
                            <image src="/static/icon/gs.png" />
                        </view>
                        <view class="jl-desc">
                            <view class="jl-title">{{ userDetail?.$notes.service_item }}</view>
                            <!-- <view class="block-item">杭州尚题企业管理咨询有限公司</view>
                            <view class="block-item">2021.9-至今(2年9个月)</view>
                            <view class="block-tip">数据指标体系建设:日常数据监控:异常分</view> -->
                        </view>
                    </view>
                </view>
            </view>
            <view class="comment-list common">
                <view class="pj">别人对他评价</view>
                <Empty v-if="!userDetail?.comment.length" text="暂无评价" />
                <scroll-view v-else scroll-y="true" class="scroll-Y">
                    <view class="item" v-for="item in userDetail?.comment" :key="item.id"
                        @click.stop="navTo(`/subPackage/community/userDetail?id=${item.user_id}&is_care=${item.is_care}`)">
                        <view class="user dispaly-center">
                            <view class="avatar">
                                <image mode="aspectFill" :src="item.avatar" />
                            </view>
                            <view class="info">
                                <view class="name dispaly-center">
                                    <view class="name">{{ item.nickname }}</view>
                                </view>
                                <view class="time">{{ item.create_time.split(' ')[0] }}</view>
                            </view>
                        </view>
                        <view class="con">
                            {{ item.content }}
                        </view>
                        <view class="c-img dispaly-center " v-if="item.image">
                            <view class="img" v-for="(img, imgIndex) in item.image.split(';')" :key="img">
                                <image mode="aspectFill" :src="img"
                                    @click.stop="preview(item.image.split(';'), imgIndex)" />
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <view class="talk dispaly-align-center" @click="comShow = !comShow">
                    <view class="talk-box dispaly-center">
                        <view class="icon">
                            <image src="/static/icon/dp.png" />
                        </view>
                        <view class="txt">我要点评</view>
                    </view>
                </view>
            </view>

        </view>
        <view class="j-btn-box dispaly-align-center">
            <view class="j-btn dispaly-align-center" @click.stop="navTo(`/subPackage/community/chat?name=${1}`)">极速联系
            </view>
        </view>
        <Comment v-if="comShow" />
    </view>
</template>

<script setup lang="ts">
import Comment from '@/components/comment/comment.vue'
import { navTo } from '@/utils/util';
import { reactive, ref } from 'vue'
import { getUserInfo } from '@/api/home/home'
import { onLoad } from '@dcloudio/uni-app';
import type { HUerinfoType } from '@/types/responseData'
import type { RequestAddCareType } from '@/types/requstParm'
import { postAddCare, postCancelCare } from '@/utils/util'


// 添加关注
const formData = reactive<RequestAddCareType>({
    user_id: 2,
    relation_id: '',
    type: 1
})

// 关注
const care = async (id: number, _index: number) => {
    formData.relation_id = id
    const res = await postAddCare(formData)
    if (res == 'ok') {
        is_care.value = 1
    }
}

// 取消关注
const cancenCare = async (id: number, _index: number) => {
    const res = await postCancelCare(id, 1)
    if (res == 'ok') {
        is_care.value = 0
    }
}

const comShow = ref<boolean>(false)
let userId = ref<number>()
let is_care = ref<number>()
onLoad((option) => {
    userId.value = option?.id
    is_care.value = option?.is_care
    userInfoData()
})

// 获取用户信息
let userDetail = ref<HUerinfoType>()
const userInfoData = async () => {
    const res = await getUserInfo({ user_id: userId.value as number })
    if (res.code == 0) {
        userDetail.value = res.data
    }
}

const preview = (images: string[], index: number) => {
    uni.previewImage({
        urls: images,
        current: index
    })
}
</script>

<style>
page {
    background-color: #f4f4f6;
}
</style>

<style lang="scss" scoped>
.main {
    padding: 30rpx;

    .scroll-Y {
        height: 595rpx;
    }

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 28rpx;
        color: #000000;
        border-bottom: 1rpx solid #D2D2D2;
        margin-bottom: 40rpx;
        padding-bottom: 20rpx
    }

    .common {
        background: #FFFFFF;
        border-radius: 15rpx;
        padding: 30rpx;
    }

    .user {
        margin-bottom: 20rpx;

        .bg {
            .bg-img {
                width: 100%;
                height: 197rpx;
            }

            .user-info {
                padding: 17rpx 17rpx 17rpx 17rpx;
                background-color: #fff;
                border-radius: 0 0 15rpx 15rpx;

                .avatar {
                    margin-top: -90rpx;

                    image {
                        width: 129rpx;
                        height: 129rpx;
                        border-radius: 50%;
                    }
                }

                .name-box {
                    margin: 20rpx 0;

                    .name {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #000000;
                        margin-right: 10rpx;
                    }

                    .gz {
                        width: 70rpx;
                        height: 28rpx;
                        border-radius: 14rpx;
                        border: 1rpx solid #008298;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 18rpx;
                        color: #008298;
                    }

                    .gw {
                        width: 70rpx;
                        height: 28rpx;
                        border-radius: 14rpx;
                        border: 1rpx solid #008298;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 18rpx;
                        color: #fff;
                        background-color: #008298;
                    }
                }

                .tip {
                    flex-wrap: wrap;

                    .tip-item {
                        margin-right: 15rpx;
                        padding: 9rpx 19rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #7E7E7E;
                        background: rgba(0, 130, 152, 0.26);
                        border-radius: 10rpx;
                        opacity: 0.74;
                    }
                }

                .one {
                    margin-top: 15rpx;
                }

                .info {
                    .icon {
                        margin-right: 11rpx;
                        padding-top: 10rpx;

                        image {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }

                    .info-text {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #929292;
                    }
                }
            }
        }
    }

    .more {
        margin-bottom: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #6E6E6E;
        line-height: 45rpx;
    }

    .state {
        margin-bottom: 20rpx;

        .container {
            margin-top: 35rpx;

            .right {
                image {
                    width: 182rpx;
                    height: 182rpx;
                    border-radius: 15rpx;
                }
            }

            .left {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 182rpx;

                .d-title {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: bold;
                    font-size: 26rpx;
                    color: #000000;
                    line-height: 40rpx;
                }

                .more-data {
                    .time {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #7E7E7E;
                        margin-right: 59rpx;
                    }

                    .ones {
                        margin-right: 34rpx;
                    }

                    .icon-box {

                        .icon {
                            padding-top: 10rpx;
                            margin-right: 10rpx;

                            image {
                                width: 32rpx;
                                height: 32rpx
                            }
                        }

                        .num {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 500;
                            font-size: 26rpx;
                            color: #A2A2A2;
                        }
                    }
                }
            }
        }
    }

    .jl {
        margin-bottom: 20rpx;

        .jl-item {
            margin-bottom: 37rpx;
            border-bottom: 1rpx solid #e6e6e6;
            padding-bottom: 42rpx;

            .icon {
                margin-right: 22rpx;

                image {
                    width: 50rpx;
                    height: 50rpx;
                }
            }

            .jl-desc {
                .jl-title {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 28rpx;
                    color: #000000;
                }

                .block-item {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #000000;
                    margin: 12rpx 0;
                }



                .block-tip {
                    margin-top: 12rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #7E7E7E;
                }
            }
        }
    }

    .comment-list {
        .pj {
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: 28rpx;
            color: #000000;
            border-bottom: 1rpx solid #D2D2D2;
            margin-bottom: 40rpx;
            padding-bottom: 20rpx
        }

        .talk {
            padding: 38rpx 0;
            border-top: 1rpx solid #e6e6e6;

            .talk-box {
                .icon {
                    margin-right: 15rpx;
                    padding-top: 10rpx;

                    image {
                        width: 38rpx;
                        height: 38rpx;
                    }
                }

                .txt {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #7E7E7E;
                }
            }
        }

        .item:last-child {
            margin-bottom: 0;
        }

        .item {
            margin-bottom: 20rpx;
            border-bottom: 1rpx solid #e6e6e6;

            .user {
                margin-bottom: 23rpx;

                .avatar {
                    margin-right: 10rpx;

                    image {
                        width: 65rpx;
                        height: 65rpx;
                        border-radius: 50%;
                    }
                }

                .info {
                    .name {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: bold;
                        font-size: 26rpx;
                        color: #000000;

                        .gz {
                            margin-left: 12rpx;
                            width: 70rpx;
                            height: 28rpx;
                            border-radius: 14rpx;
                            border: 1rpx solid #008298;
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 18rpx;
                            color: #008298;
                        }
                    }

                    .time {
                        margin-top: 10rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #7E7E7E;
                    }
                }
            }

            .con {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
                // line-height: 79rpx;
            }

            .c-img {
                flex-wrap: wrap;

                .img {
                    margin: 0 35rpx 35rpx 0;

                    image {
                        width: 196rpx;
                        height: 196rpx;
                        border-radius: 10rpx;
                    }
                }
            }
        }
    }


}

.j-btn-box {
    padding: 77rpx 0 77rpx 0;

    .j-btn {
        padding: 22rpx 206rpx;
        background: #008298;
        border-radius: 12rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
    }
}
</style>